<style>
  .index-wrapper.leave-head {
      padding-top: 4.4rem;
  }
  .publish-wrapper .publish-category {
      position: fixed;
      top: 2.2rem;
      left: 0;
      right: 0;
  }
    .publish-list {
        height: 27rem;
        overflow: auto;
        padding-bottom: 2rem;
        -webkit-overflow-scrolling : touch;
    }
</style>
<!-- public-head -->
<div class="find-app" id="app">
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">失物招领</h1>
    </div>
    <!-- main -->
    <div class="main-wrapper">
        <!-- index-wrapper -->
        <div class="index-wrapper leave-head">
            <!-- floor-two -->
            <div class="section-floor">
                <div class="publish-wrapper">
                    <div class="publish-category">
                        <div :class="postData.SearchType===1?'cur':''" @click="navChange(1)" class="category-item"><span
                                class="href-cover">最新发布</span></div>
                        <div :class="postData.SearchType===2?'cur':''" @click="navChange(2)" class="category-item"><span
                                class="href-cover">距离最近</span></div>
                    </div>
                    <div class="publish-list">
                        <mt-loadmore ref="loadmore" :auto-fill="nofill" :bottom-method="loadBottom"
                            @bottom-status-change="handleBottomChange">
                            <div v-for="(item,index) in list" :key='index' class="list-item">
                                <a :href="item.url">
                                    <div class="head">
                                        <div class="user-info">
                                            <img class="avatar" v-lazy="item.user.avatar" alt="">
                                            <div>
                                                <p class="name">{{item.contacts}}</p>
                                                <p class="time">{{item.createtime}}</p>
                                            </div>
                                        </div>
                                        <a class="link-btn" :href="item.chat_url">联系Ta</a>
                                    </div>
                                    <div class="body">
                                        <div class="info-bar">
                                            <span class="label">{{item.label}}</span>
                                            {{item.content}}
                                        </div>
                                        <div class="gallery-bar">
                                            <div v-for="(subitem,subindex) in item.imageslist" :key="subindex"
                                                class="gallery-item">
                                                <img class="img" v-lazy="subitem" alt="">
                                            </div>
                                        </div>
                                        <div class="location-bar">
                                            <div v-if="item.detailedaddress">
                                                <img class="icon" src="__CDN__/assets/img/icon-map@2x.png" alt="">
                                                <span>{{item.detailedaddress}}</span>
                                            </div>
                                            <div>
                                                <span>浏览 {{item.browse}}</span>
                                            </div>
                                        </div>
                                        <div class="reward-bar">
                                            <div class="inner">
                                                <span class="reward">赏金</span>
                                                <span class="symbol">￥</span>
                                                <span class="price">{{item.money}}</span>
                                                <span class="could">分享预计可获得￥{{item.partake}}</span>
                                            </div>
                                            <div class="share-btn" @click="share(item.id)">立即分享</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div slot="top" class="mint-loadmore-top">
                                <span v-show="bottomStatus !== 'loading'"
                                    :class="{ 'rotate': bottomStatus === 'drop' }">释放更新</span>
                                <span v-show="bottomStatus === 'loading'">加载中...</span>
                            </div>
                        </mt-loadmore>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- public-toast 弹窗在这里，自己修改参数就可以了 -->
    <div v-if="shareToast.show" class="mask-mobile" @click.self="shareToast.show = false">
        <div class="toast-mobile">
            <div class="toast-wrapper">
                <div class="toast-head">
                    <h1 class="title">分享</h1>
                    <div class="main">
                        <p class="txt">1、有赏爱心传递，预计可赚￥{{shareToastData.share}}</p>
                        <p class="txt">2、邀请好友成功分享后，您可获得好友佣 金的{{shareToastData.employe}}%</p>
                    </div>
                </div>
                <div class="toast-footer">
                    <div class="btn invite-btn" @click="friends()">取消</div>
                    <div class="btn share-btn" @click="circle()">分享</div>
                </div>
            </div>
        </div>
    </div>
    <!-- public_share -->
    <div v-if="shareFirend" class="mask-share-friend">
        <div class="btn-wrapper"><img @click.self="shareFirend = false" class="share-fiend-btn"
                src="__CDN__/assets/img/share_close.png" /><img class="share-fiend-btn"
                src="__CDN__/assets/img/share_firend.png" alt=""></div>
        <div class="tip">
            <p>请点击右上角</p>
            <p>通过【发送给朋友】或【分享到朋友圈】</p>
            <p>将有赏爱心传递下去</p>
        </div>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=K4ZBZ-DO7R4-RJ6UW-XR5SL-WL3FQ-EWBVR"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    wx.config(<?php echo $js->config(array('onMenuShareAppMessage','onMenuShareTimeline','getLocation'), false) ?>);
  
    let index = new Vue({
        el: '#app',
        data: {
            list: [],
            jumpDomain: '',
            loading: false,
            postData: {
                Type: 1,
                SearchType: 1,
                keysword: '',
                page: 0,
                longitude: '',
                latitude: '',
                limit: 10
            },
            shareToast: {
                show: false,
            },
            shareToastData: [],
            shareFirend: false,
            shareid: 0,
            bottomStatus: '',
            nofill: false
        },
        created() {
            let self = this;
            this.$indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });
            // 微信获取地理位置
            wx.ready(function () {
                wx.getLocation({
                    success: function (res) {
                        self.postData.latitude = res.latitude
                        self.postData.longitude = res.longitude
                        geocoder = new qq.maps.Geocoder({
                            complete: function (result) {
                                console.log(result.detail)
                                self.postData.city = result.detail.addressComponents.city
                                self.getPageData()
                            }
                        });
                        var coord = new qq.maps.LatLng( res.latitude,res.longitude);
                        geocoder.getAddress(coord);
                        // 首页数据初次加载

                    },cancel: function (res) {
                        self.$messagebox('用户拒绝授权获取地理位置');
                    }
                });
            })
        },
        mounted() {
            // this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        },
        methods: {
            // 上拉加载事件
            loadBottom() {
                let postData = this.postData
                postData.page++
                if (postData.latitude && postData.latitude) {
                    this.getPageData()
                }
            },
            // 触底事件
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            getPageData() {
                let self = this;
                axios.request({
                    url: "{:url('index/index')}",
                    method: "post",
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    params: self.postData,
                }).then(res => {
                    if (self.postData.page == 1) {
                        self.list = [];
                    }
                    if (res.data.code === 1) {
                        if (res.data.data.length === 0) {
                            self.$messagebox('没有更多数据了')
                        } else {
                            res.data.data.forEach(function (c) {
                                self.list.push(c)
                            })
                            self.postData.page++
                        }
                        self.loading = true;
                    } else {
                        self.loading = false;
                    }
                    self.$indicator.close();
                    self.$refs.loadmore.onBottomLoaded();
                });
            },
            navChange(index) {
                let self = this,
                    postData = this.postData;
                // 点击重置分页数
                postData.page = 1;
                // 重置搜索类型
                postData.SearchType = index
                this.getPageData()
            },
            share(id) {
                let self = this;
                self.shareid = id
                axios({
                    method: "post",
                    url: "{:url('index/getShareLink')}",
                    data: {
                        something_id: id
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(res => {
                    if (res.data.code === 1) {
                        self.shareToastData = res.data.data
                        self.shareToast.show = true
                    } else {}
                });
            },
            friends() {
                this.shareToast.show = false
            },
            circle() {
                let self = this
                self.shareToast.show = false
                self.shareFirend = true
                wx.onMenuShareTimeline({
                    title: self.shareToastData.title,
                    link: self.shareToastData.link,
                    imgUrl: self.shareToastData.imgUrl,
                    // imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
                    trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                    },
                    success: function (res) {
                        axios({
                            method: "post",
                            url: "{:url('index/index')}",
                            data: {
                                RequestName: 'share',
                                something_id: self.shareid
                            },
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        }).then(res => {
                            if (res.data.code === 1) {}
                        })
                        self.$messagebox("已分享")
                    },
                    cancel: function (res) {

                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
                wx.onMenuShareAppMessage({
                    title: this.shareToastData.title,
                    desc: this.shareToastData.desc,
                    link: this.shareToastData.link,
                    imgUrl: self.shareToastData.imgUrl,
                    // imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
                    trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容
                        // self.$messagebox('用户点击发送给朋友');

                    },
                    success: function (res) {
                        axios({
                            method: "post",
                            url: "{:url('index/index')}",
                            data: {
                                RequestName: 'share',
                                something_id: self.shareid
                            },
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        }).then(res => {
                            if (res.data.code === 1) {

                            }
                        })
                        self.$messagebox("已分享")
                    },
                    cancel: function (res) {
                        self.$messagebox('已取消');
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
        }
    })
</script>